<template>
	<view class="page">
		<uni-group title="文件详情">
			<view class="show-block">
				<view class="image-block" v-if="fileType == 'image'">
					<image class="show-image" :src="file.domain+file.path" mode="" @click="priview"></image>
				</view>
				<video class="show-video" v-if="fileType == 'video'" :src="file.domain+file.path" mode=""></video>
				<audio controls :name="file.fileName" v-if="fileType == 'music'" :src="file.domain+file.path"></audio>
				<view class="show-other" v-if="fileType == 'other'">
					暂不支持此格式，请先下载后打开或复制链接浏览器打开
				</view>
			</view>
			<view class="fileInfo fileName"><label>文件名：</label><text class="omit">{{file.fileName}}</text></view>
			<view class="fileInfo fileSuffix"><label>文件后缀：</label><text class="omit">{{file.extension}}</text></view>
			<view class="fileInfo fileSize"><label>文件大小：</label><text
					class="omit">{{this.utils.renderSize(file.fileSize)}}</text></view>
			<view class="fileInfo fileGroup"><label>文件分组：</label><text class="omit">{{file.fileGroup}}</text></view>

			<!-- <view class="fileInfo fileUrl" @click="openFile(file.domain+file.path+'?download=0')"> -->
<!-- 			<view class="fileInfo fileUrl" @click="copePath">
				<label>预览地址：</label><text class="omit">{{file.domain+file.path}}?download=0</text><text
					class="iconfont iconfuzhi"></text>
			</view> -->

			<!-- <view class="fileInfo fileUrl" @click="openFile(file.domain+file.path+'?download=1')"> -->
			<view class="fileInfo fileUrl" @click="copePath">
				<label>下载地址：</label><text class="omit">{{file.domain+file.path}}</text><text @click="copePath"
					class="iconfont iconfuzhi"></text>
			</view>

			<view class="fileInfo fileDescription"><label>文件描述：</label><text
					class="omit">{{file.fileDescription}}</text></view>
			<view class="fileInfo fileDescription"><label>创建时间：</label><text
					class="omit">{{this.utils.dateFormat(file.gmtCreate,"Y-m-d H:i:s")}}</text></view>
		</uni-group>

		<button class="del-btn" type="warn" @click="removeFile()">删除</button>
		<button class="download-btn" type="primary" @click="downloadToLocal()" style="margin-left: 20%;">下载</button>
		<button class="save-btn" type="primary" v-if="fileType == 'image'" @click="downloadToAlbum()"
			style="margin-left: 20%;">保存到相册</button>

		<view class="progress-block" v-if="progress != 0">
			<Your_Exios-Circle style="position: fixed;top: 40%;left: 40%;" :percent="progress" title="下载中...">
			</Your_Exios-Circle>
		</view>


	</view>

</template>

<script>
	var _self
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'

	export default {
		data() {
			return {
				file: this.$store.state.file_details,
				progress: 0, //下载进度
				fileType: "",
				listIndex: ""
			}
		},
		onLoad(data) {
			this.listIndex = data.index
			_self = this
			var suffix = this.$store.state.file_details.extension

			if (_self.utils.imgsuffixList.indexOf(suffix) != -1) {
				_self.fileType = "image"
			} else if (_self.utils.videosuffixList.indexOf(suffix) != -1) {
				_self.fileType = "video"
			} else if (_self.utils.musicsuffixList.indexOf(suffix) != -1) {
				_self.fileType = "music"
			} else {
				_self.fileType = "other"
			}
		},
		methods: {
			downloadToLocal() {
				_self.progress = 1
				var downloadTask = uni.downloadFile({
					url: _self.file.domain + _self.file.path,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(res) {
									var savedFilePath = res.savedFilePath;
									_self.progress = 0
									uni.showToast({
										icon: "none",
										title: "保存成功！"
									})
								}
							});
						} else {
							_self.progress = 0
							console.log(res)
							uni.showToast({
								icon: "none",
								title: "下载失败！"
							})
						}
					}
				});

				downloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					// console.log(res.progress)
					_self.progress = res.progress
				});

			},
			downloadToAlbum() {
				_self.progress = 1
				var downloadTask = uni.downloadFile({
					url: _self.file.domain + _self.file.path,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									_self.progress = 0
									uni.showToast({
										icon: "none",
										title: "保存成功！"
									})
								}
							});
						} else {
							_self.progress = 0
							console.log(res)
							uni.showToast({
								icon: "none",
								title: "下载失败！"
							})
						}
					}
				});

				downloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					// console.log(res.progress)
					_self.progress = res.progress
				});
			},
			openFile(url) {
				console.log(url)
				uni.openDocument({
					filePath: url,
					success: function(res) {
						console.log('打开文档成功');
					}
				});
			},
			copePath() {
				// uni.setClipboardData({
				// 	data: _self.file.domain + _self.file.path,
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// });


				uniCopy({
					content: _self.file.domain + _self.file.path,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})

			},
			removeFile() {
				uni.showLoading({
					mask: true,
					title: "删除中..."
				})
				var fl = _self.file
				uni.request({
					url: _self.utils.basicUrl + "/file/delete?md5=" + fl.md5 + "&id=" + fl.id + "&path=" + fl.path,
					method: "DELETE",
					data: {},
					success: function(res) {
						if (res.data.code === 20000) {
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: "删除成功"
							})
							setTimeout(function() {
								uni.reLaunch({
									url: "../index/index"
								})
							}, 800)
						} else {
							_self.utils.requestFail(res)
						}
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: '网络错误'
						})
					},
					complete() {

					}
				})
			},
			priview() {
				// 预览图片
				var fl = []
				fl.push(_self.file.domain + _self.file.path)
				uni.previewImage({
					urls: fl,
				});
			}
		}
	}
</script>

<style>
	@import url("details.css");
</style>
